<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript第二十课</title>
    <script src="../JavaScript_Lesson16/js/jquery-3.4.1.min.js"></script>
    <style>
        #container {
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>

</head>

<body>
    <div id="container">

    </div>
    <!-- <font id="font">
        一个效果展示 
    </font> -->
</body>
<script src="js/js.js"></script>
<script>
    var container = $('#container');
    container.hide(2000)
        .delay(1000)
        .animate({
            width: '256px',
            height: '256px'
        }, 2000)
        .delay(1000)
        .show(2000)
        .animate({
            width: '80px',
            height: '80px'
        }, 2000);

    // var font=$('#font');
    // font.animate({
    //     fontSize:180,
    //     fontFamily:'隶书',
    //     backgroundColor:'green'
    // },3000)



    // setTimeout(() => {
    //     container.fadeIn(3000);
    // }, 3000);
</script>

</html>